<template>
  <div class="v-body">

    <el-row>
      <el-col :span="16">
        <canvas
          :width="canvasWidth"
          :height="canvasHeight"
          style="margin-top:35px;padding-left:10px"
          id="canvas"
          v-show="showCanvas"
          ref="canvasElement"
        ></canvas>
      </el-col>
      <el-col :span="8" style="margin-top:20px">

        <el-row>
          <el-col :span="12">
            <p v-if="data.gender.value && data.gender.value.length > 0">性别： {{ data.gender.value == 'Male' ? '男性':'女性' }} </p>          
          </el-col>
          <el-col :span="12">
            <p>年龄： {{ data.age.value }} 岁 </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <p>拍摄质量: {{ (data.facequality.value).toFixed(1) }}%</p>
          </el-col>
          <el-col :span="12">
            <p>颜值评分: {{ data.gender.value == 'Male' ? (data.beauty.male_score).toFixed(0) : (data.beauty.female_score).toFixed(0) }} </p>
          </el-col>
        </el-row>
        <el-divider>健康状态</el-divider>
        <el-row>
          <el-col :span="12">
            <p>健康: {{ (data.skinstatus.health).toFixed(0) }} </p>
          </el-col>
          <el-col :span="12">
            <p>色斑: {{ (data.skinstatus.stain).toFixed(0) }} </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <p>青春痘: {{ (data.skinstatus.acne).toFixed(0) }} </p>
          </el-col>
          <el-col :span="12">
            <p>黑眼圈: {{ (data.skinstatus.dark_circle).toFixed(0) }} </p>
          </el-col>
        </el-row>
        <el-divider>情绪分析</el-divider>
        <el-row>
          <el-col :span="8">
            <p>高兴值: {{ (data.emotion.happiness).toFixed(0) }} </p>
          </el-col>
          <el-col :span="8">
            <p>平静值: {{ (data.emotion.neutral).toFixed(0) }} </p>
          </el-col>
          <el-col :span="8">
            <p>伤心值: {{ (data.emotion.sadness).toFixed(0) }} </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <p>愤怒值: {{ (data.emotion.anger).toFixed(0) }} </p>
          </el-col>
          <el-col :span="8">
            <p>恐惧值: {{ (data.emotion.fear).toFixed(0) }} </p>
          </el-col>
          <el-col :span="8">
            <p>惊讶值: {{ (data.emotion.surprise).toFixed(0) }} </p>
          </el-col>
        </el-row>
        <el-row style="margin-top:20px">
          <el-col :span="12">
            <el-button
              type="primary"
              @click="insertLoop"
              :disabled="btn_disabled"
              round
            >开始分析</el-button>          
        </el-col>
          <el-col :span="12">
            <el-button
              type="danger"
              @click="insertLoopStop"
              round
            >停止分析</el-button>
          </el-col>
        </el-row>


      </el-col>
    </el-row>
  </div>
</template>
 
<script>
// eslint-disable-next-line no-unused-vars
import adapter from 'webrtc-adapter'
// WebRTC适配器 只需要引入就ok
// eslint-disable-next-line
import jsQR from 'jsqr'
/**
 * jsqr demo
 */

export default {
  data: () => ({
    video: document.createElement('video'),
    loadingMessage: '🎥 Unable to access video stream (please make sure you have a webcam enabled)',
    // 是否显示摄像头
    showCanvas: true,
    // 计时器ID
    intervalID: null,
    // btn_disabled
    btn_disabled: false,
    canvas2d: undefined,
    outputData: undefined,
    canvasWidth: 300,
    canvasHeight: 250,
    data: {
      gender: {value: null},
      age: {value: 0},
      emotion: {
        anger: 0,
        disgust: 0,
        fear: 0,
        happiness: 0,
        neutral: 0,
        sadness: 0,
        surprise: 0
      },
      beauty: {
        female_score: 0,
        male_score: 0
      },
      skinstatus: {
        health: 0,
        stain: 0,
        acne: 0,
        dark_circle: 0
      },
      facequality: {value: 0},
      eyestatus: {
        left_eye_status: {no_glass_eye_open: 0},
        right_eye_status: {no_glass_eye_open: 0}
      }
    }
  }),
  destroyed () {
    this.closeCamera()
  },
  created () {
    this.openScan()
  },
  methods: {
    // 点击选中图片
    readLocalFile () {
      var canvas = document.getElementById('canvas')
      var imgUrl = canvas.toDataURL('image/jpeg')
      let data = new FormData()
      data.append('api_key', '')
      data.append('api_secret', '')
      data.append('image_base64', imgUrl)
      // gender 性别
      // age 年龄
      // smile 笑容分析
      // glass 佩戴眼镜
      // blur 人脸模糊
      // emotion 情绪识别
      // ethnicity 人种分析
      // skinstatus 面部特征
      // facequality 人脸质量
      data.append('return_attributes', 'gender,age,beauty,blur,eyestatus,emotion,ethnicity,skinstatus,facequality,mouthstatus')
      // 颜值评分
      data.append('beauty_score_min', 0)
      data.append('beauty_score_max', 100)

      this.$http.post('https://api-cn.faceplusplus.com/facepp/v3/detect', data).then(res => {
        console.log(res.data.faces[0].attributes)
        this.data = res.data.faces[0].attributes
      })
    },
    insertLoop () {
      this.btn_disabled = true
      this.intervalID = setInterval(this.insLoop, 300) // 创建计时器
    },
    insLoop: function (index) {
      this.readLocalFile()
    },
    insertLoopStop () {
      this.btn_disabled = false
      clearInterval(this.intervalID) // 销毁计时器
      this.intervalId = null // 把计时器id设置为null
    },
    // 开启摄像头
    openScan () {
      const videoParam = { video: true }
      navigator.mediaDevices.getUserMedia(videoParam).then((stream) => {
        this.video.srcObject = stream
        this.video.setAttribute('playsinline', true) // required to tell iOS safari we don't want fullscreen
        this.video.play()
        requestAnimationFrame(this.tick)
      })
    },
    // 关闭摄像头
    closeCamera () {
      if (this.video.srcObject) {
        this.video.srcObject.getTracks().forEach(function (track) {
          track.stop()
        })
      }
    },
    tick () {
      if (this.video.readyState === this.video.HAVE_ENOUGH_DATA) {
        this.canvasHeight = this.video.videoHeight
        this.canvasWidth = this.video.videoWidth
        !this.canvas2d && (this.canvas2d = this.$refs.canvasElement.getContext('2d'))
        this.canvas2d.drawImage(this.video, 0, 0, this.canvasWidth, this.canvasHeight)
        // var imageData = this.canvas2d.getImageData(0, 0, this.canvasWidth, this.canvasHeight)
        // var abc = this.canvas2d.drawImage(0, 0, this.canvasWidth, this.canvasHeight)
        // console.log(canvas.toDataURL('image/jpeg'))
      }
      requestAnimationFrame(this.tick)
    },
    drawLinen (begin, end, color) {
      this.canvas2d.beginPath()
      this.canvas2d.moveTo(begin.x, begin.y)
      this.canvas2d.lineTo(end.x, end.y)
      this.canvas2d.lineWidth = 4
      this.canvas2d.strokeStyle = color
      this.canvas2d.stroke()
    }
  }
}
</script>
 
<style>
@import "../assets/css/font.css";

body {
  font-family: "webfont", sans-serif;
  /* background-image: url("../assets/backtitle.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 270px 200px;
  background-position-y: 300px; */
}
</style>
